import React, {useState, useEffect, useMemo} from 'react';
import { Btn, save_data, obj_str, loc, filter_row, useCmd, Title, Ret, PanelFind, WaitUmd, useHigh, GridTable } from 'sui';
import { reload } from './cmd';

const PsnView = ({ mod, hreturn, cur, title }) => {
    const [main, setMain] = useState();
    const [high] = useHigh(190, 100);
    const umd = useCmd();

    useEffect(() => {
        reload(null, mod, cur, setMain);
    }, [cur, mod]);

    const getRow = useMemo(() => {
        const lst = ["sn", "dia", "width", "dt", "box"];
        return filter_row(main, lst, umd.filter);
    }, [main, umd.filter]);

    const col = [
        {name: loc("l_193"), key: 'index', width: 70},
        {name: loc("l_101"), key: 'time', width: 180},
        {name: loc("l_810"), key: 'sn', width: 180},
        {name: loc("l_805"), key: 'width', width: 100},
        {name: loc("l_807"), key: 'dia', width: 100},
        {name: loc("l_806"), key: 'dt', width: 100},
        {name: loc("l_800"), key: 'box', width: 100},
    ];

    const hout = () => {
        const name = `${title}_${obj_str(cur, "sn")}`;
        save_data(main, col, name, umd);
    };

    const Right = () => (
        <div className="inline-flex">
            <Btn className="mr-4" hcmd={hout}>{loc("l_298")}</Btn>
            <Ret hcmd={hreturn}/>
        </div>
    );

    const Left = () => <Title mod={obj_str(cur, "sn")} sub={title}>{loc("l_885")}</Title>;

    return (
        <div className="flex flex-col">
            <PanelFind left={<Left/>} right={<Right/>} hcmd={umd.setFilter}/>
            <GridTable high={high} col={col} row={getRow} rowHeight={45}/>
            <WaitUmd umd={umd}/>
        </div>
    );
};

export {PsnView};
